/**
 * 表单组件
 * Author: luweijun
 * Date: 2017-3-5
 */

import React from 'react';
import BaseProps from './BaseProps'
import tool from '../../../../../utils/tool';
class FormBtn extends React.Component {
    render() {
        const { widget } = this.props;

        const bright = widget.color ? tool.isBrightColor(widget.color || '000000') : false;
        const iconSrcm = tool.getSrcmByTypeAndBright(widget.type, bright);

        const gradColor = tool.converionColor(widget.color);
        const grad = `linear-gradient(140deg, rgb(${gradColor.R},${gradColor.G},${gradColor.B}),#${widget.color})`;

        const inlineStyle = {
            borderRadius: `${widget.radius}px`,
            opacity: widget.opacity,
            background: (widget.custom && (widget.icon_src || widget.url)) ? 'none' : grad,
        };

        let innerNode = '';
        const customSrc = widget.custom && (widget.icon_src || widget.url);
        const isNotCustom = !widget.custom || !widget.icon_src && !widget.url && widget.icon_class;
        if (customSrc) {
            innerNode = <img className="replaceImge" src={customSrc} />;
        }

        if (isNotCustom) {
            innerNode =
              (<div className="textimg" style={{ height: `${widget.height}px`, width: 'auto' }}>
                <img className="jiaohuimg" style={{ verticalAlign: 'inherit', display: widget.icon ? 'inline' : 'none' }} src={iconSrcm} />
                <span className="jiaos" style={{ color: bright ? '#000' : '#FFF' }}>{widget.tip_text}</span>
              </div>);
        }

        return (
          <div className="widget-inline" style={inlineStyle}>
            {innerNode}
          </div>
        );
    }
}
//从基本属性继承、复写
FormBtn.defaultProps = Object.assign({}, BaseProps, {
    type: 22,
    name: "form", //表单组件
    icon_class: "icon-form",
    type_display: $._("Form widgets"),
    hasChild:1,//是否需要鼠标悬停显示子组件
    action: {
        0: {
            form_type: 0, // 预约报名
            title: $._("Booking registration"),
            icon_class: 'icon-booking'
        },
        1: {
            form_type: 1,
            title: $._("Job application"),
            icon_class: 'icon-job'
        },
        2: {
            form_type: 2,
            value: $._("Prizes sent"),
            icon_class: 'icon-prizes'
        },
        3: {
            form_type: 3,
            title: $._("Custom"),
            icon_class: 'icon-custom'
        }
    }
});
export default FormBtn
